<!DOCTYPE HTML>
<html reftest-async-scroll>
<body>
  <div style="width:400px; height:300px; overflow:hidden; border:2px solid black"
       reftest-displayport-x="0" reftest-displayport-y="0"
       reftest-displayport-w="800" reftest-displayport-h="2000"
       reftest-async-scroll-x="0" reftest-async-scroll-y="100">
    <!-- In this test the position:sticky element gets its own layer, and also has scrollable metrics
         because it shares the same animated geometry root as the other elements. This tests that
         layers with both sticky info and scroll info are transformed correctly in the face of an async
         scroll transform. -->
    <div style="height:100px; width:200px; float:left; background:purple"></div>
    <div style="left:200px; top:0; height:300px; width:200px; float:left; background:yellow; position:sticky; z-index:1;"></div>
    <div style="height:300px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
  </div>
